<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Rotation</title>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define main parameters
        const centerX = 200;
        const centerY = 180; // Adjusted for better layout with caption
        const radius = 80;
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // 1. Draw the circle representing the sphere
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the dashed axis of rotation
        ctx.beginPath();
        ctx.setLineDash([6, 6]);
        ctx.moveTo(centerX, centerY - radius - 50);
        ctx.lineTo(centerX, centerY + radius + 20);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 3. Draw the flea's house at the top pole
        const houseY = centerY - radius;
        ctx.beginPath();
        ctx.moveTo(centerX - 6, houseY + 2);
        ctx.lineTo(centerX + 6, houseY + 2);
        ctx.lineTo(centerX + 5, houseY - 4);
        ctx.lineTo(centerX, houseY - 6);
        ctx.lineTo(centerX - 5, houseY - 4);
        ctx.closePath();
        ctx.fill();

        // 4. Draw the rotation symbol (curved arrow)
        const arrowCenterY = centerY - radius - 25;
        const arrowRadiusX = 25;

        // The curved part of the arrow
        ctx.beginPath();
        ctx.moveTo(centerX - arrowRadiusX, arrowCenterY + 5);
        ctx.quadraticCurveTo(centerX, arrowCenterY - 15, centerX + arrowRadiusX, arrowCenterY);
        ctx.stroke();

        // The arrowhead (a filled triangle)
        const arrowTipX = centerX + arrowRadiusX;
        const arrowTipY = arrowCenterY;
        ctx.beginPath();
        ctx.moveTo(arrowTipX, arrowTipY);
        ctx.lineTo(arrowTipX - 12, arrowTipY + 4);
        ctx.lineTo(arrowTipX - 8, arrowTipY - 7);
        ctx.closePath();
        ctx.fill();

        // 5. Draw the omega symbol (ω)
        ctx.font = "italic bold 28px serif";
        ctx.fillText("ω", centerX + arrowRadiusX + 15, arrowCenterY + 8);

        // 6. Draw the figure caption
        ctx.font = "bold 24px serif";
        ctx.textAlign = "center";
        ctx.fillText("Fig. 1.197.", centerX, centerY + radius + 70);

    </script>
</body>
</html>